<template>
  <div class="chartarea">
    <div id="leakageChart" class="echart"></div>
  </div>
</template>

<script>
import echarts from "@/utils/lib/echarts";
import { DataZoomComponent } from "echarts/components";
import { BarChart, LineChart } from "echarts/charts";
echarts.use([BarChart, LineChart, DataZoomComponent]);
export default {
  name: "leakageChart",
  props: {
    // 图数据
    chartData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.getChartsdata(this.chartData);
  },
  beforeDestroy() {
    this.chartDes();
  },
  watch: {
    chartData: {
      handler(val) {
        if (val) {
          this.chartDes();
          this.getChartsdata(this.chartData);
        }
      },
      deep: false,
      immediate: false,
    },
  },
  methods: {
    chartDes() {
      if (!this.chart) {
        return;
      }
      this.chart.dispose();
      this.chart = null;
    },
    getChartsdata(chartData) {
      let option = {
        title: {
          left: "center",
          text: "当日24h漏电监测图",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "0%",
          top: "15%",
          containLabel: true,
        },
        // dataZoom: {
        //   type: "slider", // slider  inside
        //   show: true,
        //   zoomLock: false, // 如果设置为 true 只能平移，不能缩放
        //   // xAxisIndex: [0], // 控制哪个X轴 多个X轴的时候生效
        //   // bottom: -5, // slider生效
        //   start: 0,
        //   end: 100, //初始化滚动条
        // },
        legend: {
          data: chartData.legendData,
          top:25
        },
        color: chartData.color,
        xAxis: [
          {
            type: "category",
            data: chartData.xAxisData,
            axisPointer: {
              type: "shadow",
            },
            // boundaryGap: [0.02, 0.02] //坐标轴两边留白
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "kwh",
            // min: 0,
            // max: 250,
            // interval: 50,
            axisLabel: {
              formatter: "{value}",
            },
          },
          // {
          //   type: "value",
          //   name: "总计能耗",
          //   // min: 0,
          //   // max: 100,
          //   // interval: 25,
          //   axisLabel: {
          //     formatter: "{value} kwh",
          //   },
          // },
        ],
        series: chartData.seriesData,
      };
      this.initChart("leakageChart", option);
    },
    initChart(id, options) {
      this.chart = echarts.init(document.getElementById(id));
      this.chart.setOption(options);
      window.addEventListener("resize", () => {
        if (this.chart) {
          this.chart.resize();
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.chartarea {
  .echart {
    width: 100%;
    height: 500px;
  }
}
</style>
